<template>
  <div class="container">
    <el-card class="box-card">
      <queryQuestions @btnOk="btnOk"></queryQuestions>
      <el-alert
        :title="`数据一共 ${tableData.counts} 条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <el-table
        :data="tableData.items"
        style="width: 100%; margin-top: 15px"
        :header-cell-style="{ backgroundColor: '#fafafa' }"
      >
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="106">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="103">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="103">
          <template slot-scope="{ row }">
            {{ row.questionType | getQuestionType }}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="280">
          <template v-slot="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180">
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="103">
          <template slot-scope="{ row }">
            {{ row.difficulty | getdifficulty }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="103">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              icon="el-icon-view"
              size="small"
              circle
              plain
              @click="look(row.id)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              circle
              plain
              @click="
                $router.push({ path: '/questions/new', query: { id: row.id } })
              "
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              circle
              plain
              @click="del(row)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-check"
              size="small"
              circle
              plain
              @click="addChoice(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :tableData="tableData" @changePage="changePage"></pagination>
    </el-card>
    <titlePreview
      :preview="preview"
      :showDialog.sync="showDialog"
    ></titlePreview>
  </div>
</template>

<script>
import { choiceAdd, remove, detail, list } from '@/api/hmmm/questions.js'
import titlePreview from '@/module-hmmm/components/titlePreview'
import { questionType } from '@/api/hmmm/constants.js'
import queryQuestions from '@/module-hmmm/components/queryQuestions'
import pagination from '@/module-hmmm/components/pagination'
export default {
  data () {
    return {
      tableData: [],
      questionType,
      counts: null,
      formInline: {
        page: 1,
        pagesize: 5
      },
      showDialog: false,
      preview: {}
    }
  },
  components: {
    queryQuestions,
    pagination,
    titlePreview
  },
  created () {
    this.getList()
  },
  methods: {
    async btnOk (formInline) {
      this.formInline = { ...this.formInline, ...formInline }
      this.getList()
    },
    async getList () {
      const { data } = await list(this.formInline)
      this.tableData = data
    },
    async changePage (page) {
      this.formInline = { ...this.formInline, ...page }
      this.getList()
    },
    async look (id) {
      const { data } = await detail({ id })
      this.preview = data
      this.showDialog = true
    },
    async del (row) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(row)
      this.$message.success('删除成功')
      this.getList()
    },
    async addChoice (id) {
      await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
      await choiceAdd({
        id,
        choiceState: 1
      })
      this.$message.success('加入精选成功')
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin: 10px;
}
</style>
